<template>
    <view class="goods" v-if="goods">
        <!-- 轮播图 -->
        <view >
			<u-swiper 
            class="goods_image"
			:list="goods.pics"
			name="pics_big"
			height="750"
            @click="primage"
			></u-swiper>
            <!-- img-mode="400" -->
		</view>
        <view class="goods_title">
            <view class="price"> ￥ {{goods.goods_price}}</view>
            <view class="title">
                {{goods.goods_name}}
            </view>
        </view>

        <!-- 下面详情内容 -->
        <view class="introduce">
            <view class="introduce_xiang">图文详情</view>
            <!-- 简单使用富文本   rich-text  -->
            <!-- <rich-text nodes="{{text}}"></rich-text> -->
            <!-- 复杂使用富文本     u-parse -->   
            <u-parse :html="goods.goods_introduce"></u-parse>
        </view>

        <!-- 底部tabbar -->
        <view class="navigation">
		<view class="left">
			<view class="item">
				<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">客服</view>
			</view>
			<view class="item">
				<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">店铺</view>
			</view>
			<navigator class="item car" url="/pages/cart/cart" open-type="switchTab">
				<u-badge class="car-num" :count="allCount" type="error" :offset="[-3, -6]"></u-badge>
				<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1" >购物车</view>
			</navigator>
		</view>
		<view class="right">
			<view class="cart btn u-line-1" @click="handIeInCart">加入购物车</view>
			<view class="buy btn u-line-1">立即购买</view>
		</view>
	</view>
    </view>
</template>
<script>
export default {
    data(){
        return{
            goods:null,
        }
    },
    computed: {
        // 数量总计
        allCount(){
            return this.$store.getters.count
        },
    },
    async onLoad({id}){
        // console.log(opiton);
        // const { id } = opiton
        // const id = 9832
        const res = await this.$u.get("/goods/detail", {goods_id: id})
        // console.log(res);
        this.goods=res.message
        console.log(this.goods.goods_id);
    },
    methods:{
        // 点击图片放大功能
        primage(index){
            // console.log(index);
            // 图片
            const urls = this.goods.pics.map((v)=> v.pics_big)
            // 点击图片下表 显示相应的图片
            const current = urls[index]
            // 点击放大
            uni.previewImage({urls, current})
        },
        //点击 添加入购物车
        handIeInCart(){
            // 判断商品有没添加过
            const index = this.$store.state.cartList.findIndex((goods) => 
            goods.goods_id === this.goods.goods_id
            )

            // 取仓库数据
            const cartList = this.$store.state.cartList

            // 判断  
            if(index === -1){
                // 没有找到 不能修改 vuex的数据 
                cartList.push({...this.goods, checked:true, count:1})
            }else {
                // 找到了 商品数量 增加
                cartList[index].count++
            }
            this.$store.commit('setCartList', cartList)
            uni.showToast({
                title:'添加成功',
                icon:'none'
            })
        }
    }
}
</script>

<style lang="scss">
.goods{
    padding-bottom: 102rpx;
}
.goods_title{
    height: 220rpx;
    border-bottom: 15rpx solid  #f9f9f9;
    .price{
        color: $themeColor;
        margin: 15rpx;
        font-size: 28rpx;
    }
    .title{
        line-height: 50rpx;
        margin: 15rpx;
        font-size: 32rpx;
    }
}
.introduce{
    .introduce_xiang{
        margin: 20rpx;
        font-size: 30rpx;
        text-align: center;
    }
}

.navigation {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
	display: flex;
	margin-top: 100rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0;
	.left {
		display: flex;
		font-size: 20rpx;
		.item {
			margin: 0 30rpx;
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}
		.cart {
			background-color: #ed3f14;
			margin-right: 30rpx;
		}
		.buy {
			background-color: #ff7900;
		}
	}
}
</style>